<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::before, .clearfix::after {
            content: "";
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
    <!-- 
        为什么要清除浮动?
        1.父级没有高度
        2.子盒子浮动了
        3.影响下面布局了, 我们就应该清除浮动了.

        
        1.清除浮动本质是?
            清除浮动的本质是清除浮动元素脱离标准流造成的影响
        2.清除浮动的策略是?
            闭合浮动, 只让浮动在父盒子内部影响, 不影响父盒子外面的其他盒子
        3.额外标签法?
            隔墙法如下
     -->
    <!-- 
        解决方法
        1.清除浮动  额外标签法
        额外标签法也称为隔墙法, 是w3c推荐的做法
        
        额外标签法也称为隔墙法, 是w3c推荐的做法

        额外表现法会在浮动元素末尾添加一个空标签. 这个新增加的标签必须是一个块元素不能是行内元素

        2.父级添加overflow
            可以给父级元素添加overflow属性, 将其属性值设置为: hidden, auto, scroll

        3.:after伪元素法
            .clearfix:after {
                contemt: "",
                display: block,
                height: 0;
                clear: both;
                visibility: hidden;
             }
             .clearfix {
                 *zoom: 1;
             }
        4.双伪元素清除浮动

     -->
</body>
</html>
